<template>
  <div class="my_comment">
    <div class="my_comment_container">
      <div class="my_comment_c-user">
          <img :src="headImgUrl">
          <div>
              <p class="my_comment_nick-name">{{userName || nickName}}</p>
              <p>{{time}}</p>
          </div>
      </div>
      <div class="my_comment_c-content">
          {{detail}}
      </div>
      <div class="my_comment_c-pics">
          <img v-for="(path, index) in paths" :key="index" :src="`http://www.nineunity.com${path}`" />
      </div>
    </div>
  </div>
</template>
<script>
import '../../css/layout.css'
import { getCookie } from '@/utils/cookiesUtil.js'
export default {
  	name: 'my_comment',
  	data() {
  		return {
            nickName: getCookie('nickName') || '天使代理',
            headImgUrl: getCookie('headImgUrl') || require('_images/avatar.jpg'),
  		}
      },
    props: {
        userName: {
            type: String,
            default: '豆沙色',
        },
        time: {
            type: String,
            default: '2018-04-15',
        },
        detail: {
            type: String,
            default: '打开了是我细化的颜色，涂上去一点也不敢，滋润度很好，我很喜欢',
        },
        paths: {
            type: Array,
            default: function () {
                return [
                    '/upload/20181219/jpg/0e1237bc-96f3-4f15-a638-7b8188504547.jpg',
                    '/upload/20181219/jpg/0e1237bc-96f3-4f15-a638-7b8188504547.jpg',
                ]
            }
        }
            
    },
  	computed: {
  	},
  	methods: {
    },
    mounted(){
    },
    components: {
    }
}  
</script>

<style lang="less" scoped>
@import "../../css/common";
.my_comment {
  padding: 22px 32px;
  box-sizing: border-box;
  background-color: white;
  margin-bottom: 20px;
  .my_comment_container {
      border-bottom: 2px solid #f3f3f3;
      background-color: white;
      &:last-child{
          border-bottom: none;
      }
      .my_comment_c-user {
          font-size: 24px;
          color: #999;
          margin: 24px 0;
          .flex(start);
          img {
              width: 50px;
              margin-right: 10px
          }
          .my_comment_nick-name {
              color: #333;
          }
      }
      .my_comment_c-content {
          margin-bottom: 24px;
          font-size: 26px;
          color: #333;
      }
      .my_comment_c-pics {
          img {
              width: 180px;
              height: 180px;
              margin-right: 20px;
              margin-bottom: 32px;
              &:last-child {
                  margin-right: 0;
              }
          }
      }
  }
}
</style>